<template>
  <div>
      <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-delete"></i> 练习</el-breadcrumb-item>
                <el-breadcrumb-item>练习-01</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div>
        <p>表格</p>
        <!--搜索框-->
        <div class="seacher">
            <el-select v-model='searchOption.model' placeholder="请选择" class="os">
                <el-option v-for="item in searchOption.options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
            <el-date-picker v-model="searchOption.startDate" type='date' placeholder='选择开始日期'>
            </el-date-picker>
            <el-date-picker v-model="searchOption.endDate" type='date' placeholder='选择结束日期'
            :picker-options="searchOption.pickerOptions">
            </el-date-picker>
            <el-input v-model="searchOption.key" placeholder="输入搜索条件" class="key">
            </el-input>
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
            <el-button type="primary" icon="delete" @click="clearSearch">清除</el-button>
        </div>
        <div>
            <!--表格-->
          <el-table :data="tabledata" border stripe style="width:100%" 
          @expand="handleExpand" @selection-change="handleSelectionChange">
              <el-table-column
               type="selection"
                width="55">
              </el-table-column>

              <!--展开行-->
              <el-table-column type="expand" fixed="left">
                  <template scope="props">
                      <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="方法">
                            <span>{{ props.row.method }}</span>
                          </el-form-item>
                      </el-form>
                      <el-form label-position="left" inline class="demo-table-expand">
                          <el-form-item label="ip地址">
                            <span>{{ props.row.host }}</span>
                          </el-form-item>
                      </el-form>
                  </template>
              </el-table-column>


              <el-table-column
                label="系统"
                fixed="left"
                width="100">
                  <template scope="scope">
                      <el-popover trigger="click"  placement="top">
                        <p>方法: {{ scope.row.method }}</p>
                        <p>ip: {{ scope.row.host }}</p>
                        <div slot="reference" class="name-wrapper">
                          <el-tag>{{ scope.row.from }}</el-tag>
                        </div>
                      </el-popover>
                  </template>
              </el-table-column>
              <el-table-column
                prop="host"
                label="ip地址"
                fixed="left"
                width="150">
              </el-table-column>
              <el-table-column
                prop="method"
                label="方法"
                width="160"
                fixed="left"
                >
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="时间"
                width="180"
                >
              </el-table-column>
              <el-table-column
                prop="version"
                label="版本"
                width="80"
                >
              </el-table-column>
              <el-table-column
                prop="userId"
                label="用户id"
                width="80"
                >
              </el-table-column>
              <el-table-column
                prop="resultCode"
                label="结果"
                width="80"
                >
              </el-table-column>
              <el-table-column
                prop="timeConsume"
                label="耗时(毫秒)"
                width="120"
                >
              </el-table-column>
              <el-table-column
                prop="deviceId"
                label="设备编号"
                width="350"
                >
              </el-table-column>
              <el-table-column
                prop="token"
                label="token"
                width="350"
                >
              </el-table-column>
              
              <el-table-column
                label="操作"
                fixed="right"
                width="200"
                >
                  <template scope="scope">
                    <el-button type="text" @click="handleLook(scope.$index,scope.row)" size="small">查看</el-button>
                    <el-button type="text" @click="handleEdit(scope.$index,scope.row)" size="small">修改</el-button>
                    <el-button type="text" @click="handleDelete(scope.$index,scope.row)" size="small">删除</el-button>
                  </template>
              </el-table-column>
          </el-table>
          <!--分页-->
          <div style="margin-top:10px;">
              <el-pagination class="my-el-pagination"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[10, 20, 30]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="rowCount">
              </el-pagination>
          </div>
          <!--操作按钮-->
          <div>
              <el-button type="primary" icon="delete" @click="deleteAll" :disabled="deleteType">批量删除</el-button>
              <el-button type="success" icon="d-arrow-right" @click='otherPage'>另一个页面</el-button>
          </div>
          <el-dialog title="修改内容" :visible.sync="dialogFormVisible" size="tiny">
              <el-form :model="form" :rules="rules">
                  <el-form-item label = 'ip地址' :label-width="formLabelWidth">
                      <el-input v-model="form.host" disabled></el-input>
                  </el-form-item>
                  <el-form-item label = '方法' :label-width="formLabelWidth">
                      <el-input v-model="form.method" disabled></el-input>
                  </el-form-item>
                  <el-form-item label = '系统' :label-width="formLabelWidth" prop="from">
                      <el-select v-model="form.from" placeholder="请选择系统" style="width:100%">
                          <el-option label="安卓" value="android"></el-option>
                          <el-option label="苹果" value="ios"></el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label = '版本' :label-width="formLabelWidth" prop="version">
                      <el-input v-model="form.version"></el-input>
                  </el-form-item>
                  <el-form-item label = '用户id' :label-width="formLabelWidth" prop="userId">
                      <el-input-number v-model="form.userId" style="width:100%"></el-input-number>
                  </el-form-item>
                  <el-form-item label = '耗时(毫秒)' :label-width="formLabelWidth">
                      <el-input v-model="form.timeConsume"></el-input>
                  </el-form-item>
                  <el-form-item label = '结果' :label-width="formLabelWidth">
                      <el-input v-model="form.resultCode"></el-input>
                  </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
              </div>
          </el-dialog>
        </div>
      </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data: function(){
      return {
        tabledata: [],
        currentPage: 1,
        rowCount:0,
        pageSize: 10,
        dialogFormVisible: false,
        formLabelWidth: '80px',
        form: {
            host: '',
            method: '',
            from: '',
            version: '',
            userId: '',
            timeConsume: '',
            resultCode: ''
        },
        rules: {
          from: [
                    //blur 失去焦点
                    { required: true, message: '请选择系统', trigger: 'change' }
                ],
          version: [
                      { required: true, message: '请输入版本名称', trigger: 'blur' },
                      { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                  ],
          userId: [
                      {required: true, message: '请输入用户id', type: 'number', trigger: 'blur'}
                  ]
        },
        searchOption: {
            model: '',
            options: [
                {
                    value: 'ios',
                    label: '苹果'
                }, 
                {
                    value: 'android',
                    label: '安卓'
                }
            ],
            key: '',
            startDate: '',
            endDate: '',
            pickerOptions: {
                // disabledDate: function(time){
                //     return time.getTime() < this.startDate - 8.64e7;
                // }
                // disabledDate(time){
                //     console.log(time);
                //     console.log(this.searchOption.startDate)
                // }   
                // 只有使用lambda表达式,this才能引用到vue实例
                disabledDate: (time)=>{
                    if(this.searchOption.startDate){
                        //开始时间不为空
                        //当日历中的时间小于开始时间时,不能被选择
                        return time.getTime() < this.searchOption.startDate.getTime();
                    }else{
                        console.log('没有选择开始时间');
                    }
                }
            } 
        },
        deleteType: true,
        multipleSelection: []
      };
  },
  methods: {
      handleSizeChange(val) {
          this.pageSize = val;
          this.getData();
      },
      handleCurrentChange(val) {
          this.currentPage = val;
          this.getData();
      },
      getData(){
          let url = 'http://localhost:10020/sys/access/listQuery';
          let params = {
              page: this.currentPage,
              rows: this.pageSize,
              key: ''
          }
          axios.get(url,{
            params: params
          }) 
          .then(response=>{
              if(response.data.code==0){
                  this.tabledata = response.data.data.data.map(item=>{
                      return {
                                from: item.header.from,
                                host: item.header.host,
                                method: item.header.method,
                                version: item.header.version,
                                token: item.header.token,
                                deviceId: item.header.deviceId,
                                userId: item.header.userId,
                                timeConsume: item.timeConsume,
                                resultCode: item.resultCode,
                                createTime: this.formatDateTime(item.createTime)
                            }
                  });
                  this.currentPage = response.data.data.currentPage;
                  this.rowCount = response.data.data.rowCount;
              }
          })
          .catch(error=>{
              console.log(error)
          })
      },
      formatDateTime(inputTime) {    
          var date = new Date(inputTime);  
          var y = date.getFullYear();    
          var m = date.getMonth() + 1;    
          m = m < 10 ? ('0' + m) : m;    
          var d = date.getDate();    
          d = d < 10 ? ('0' + d) : d;    
          var h = date.getHours();  
          h = h < 10 ? ('0' + h) : h;  
          var minute = date.getMinutes();  
          var second = date.getSeconds();  
          minute = minute < 10 ? ('0' + minute) : minute;    
          second = second < 10 ? ('0' + second) : second;   
          return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;   
      },
      handleLook(index,row){
          console.log(index);
          console.log(row);
      },
      handleEdit(index,row){

          this.form.host = row.host;
          this.form.method = row.method;
          this.form.from = row.from;
          this.form.version = row.version;
          this.form.userId = row.userId;
          this.form.timeConsume = row.timeConsume;
          this.form.resultCode = row.resultCode;
          this.dialogFormVisible = true;
      },
      handleDelete(index,row){

      },
      search(){
          console.log("搜索条件");
          console.log(this.searchOption.model);
          console.log(this.searchOption.key);
          console.log(this.searchOption.startDate);
          console.log(this.searchOption.endDate);
      },
      clearSearch(){
          this.searchOption.model = '';
          this.searchOption.key = '';
          this.searchOption.startDate = '';
          this.searchOption.endDate = '';
          
      },
      select(selection, row){
          console.log(selection)
          console.log(row)
      },
      deleteAll(){
        let temp = this.multipleSelection.map(item=>{
            return {
                system: item.from,
                host: item.host,
                method: item.method
            }
        })
        console.log(temp);
        let length = temp.length;
        this.$confirm(`是否删除这${length}条数据?`,'提示',{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(()=>{

            // caozuo 
            this.$message({
                type: 'success',
                message: '删除成功!'
            });
        }).catch(()=>{
            this.$message({
                type: 'info',
                message: '取消删除'
            });
        });
      },
      handleSelectionChange(val){
        this.multipleSelection = val;
        console.log(this.multipleSelection)
        if(this.multipleSelection.length==0){
            this.deleteType = true;
        }else{
            this.deleteType = false;
        }
      },

      /**
       * 在table上定义 @expand="handleExpand"
       * 会自动注入属性
       * row: 行数据
       * expanded: 点击后的展开状态
       */
      handleExpand(row, expanded){
        console.log(expanded)
      },

      // 跳转到另一个页面
      otherPage(){
        this.$router.push('/demo02');
      }
  },
  mounted(){
      this.getData();
  }
}
</script>

<style scoped>
.my-el-pagination {
  text-align: right;
}
.seacher{
    margin-top: 10px;
    margin-bottom: 10px;
}

.seacher .select{
    width: 130px;
}
.seacher .key{
    width: 180px;
    margin-left: 5px;
    margin-right: 5px;    
}

</style>



